<template>
    <div class="app-container">
      <div class="flex justify-between">
        <div class="flex flex-wrap">
          <div>
            <span>用户编号：</span>
            <el-input
              v-model="listQuery.user_code"
              class="marginRB10"
              clearable
              placeholder="请输入用户编号"
              style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>用户昵称：</span>
            <el-input
              v-model="listQuery.nickname"
              class="marginRB10"
              clearable
              placeholder="请输入用户昵称"
              style="width: 200px"
            ></el-input>
          </div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="getList"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
  
      <el-table
        ref="dataList"
        :data="tableData"
        :tree-props="{ children: 'get_detail', hasChildren: 'hasChildren' }"
        row-key="id"
        border
        style="margin-bottom: 20px"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
        <el-table-column label="领取时间" prop="user.updated_at"></el-table-column>
        <el-table-column label="领取用户ID" prop="user.user_id"></el-table-column>
        <el-table-column label="领取用户编号" prop="user.user_code"></el-table-column>
        <el-table-column label="领取用户昵称" prop="user.nickname"></el-table-column>
        <el-table-column label="领取礼物ID" prop="gift_id"></el-table-column>
        <el-table-column label="领取礼物名称" prop="gift.name"></el-table-column>
        <el-table-column label="领取数量" prop="num"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getList"
      /> -->
    </div>
</template>
  
<script>
  import { DropBoxPickUpDetails } from '@/api/box'
  
  export default {
    name: 'welcome',
    data() {
      return {
        confirmBtn: false,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        tableData: [],
      }
    },
    created() {
      this.listQuery.id = this.$route.query.id
      this.getList()
    },
    methods: {
        indexMethod(index) {
          return this.tableData.length - index
        },
        getList() {
            this.listLoading = true
            for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            DropBoxPickUpDetails(this.listQuery).then(({ data }) => {
              if(data.length) {
                for(let i of data) {
                  i.get_detail.map(item => {
                    item.num = item.number
                  })
                  i.user.updated_at = i.updated_at
                }
              }
              this.tableData = data
              // this.total = data.total
              this.listLoading = false
              this.confirmBtn = false
            })
        },
        resetSubmit() {
            this.listQuery = {
              id: this.$route.query.id,
              page: 1,
              perPage: 10,
              user_code: undefined,
              nickname: undefined
            }
            this.getList()
        },
    }
  }
  </script>
  